/**
 * 尊敬的用户，你好：页面 JS 面板是高阶用法，一般不建议普通用户使用，如需使用，请确定你具备研发背景，能够自我排查问题。
 * 我们可以用 JS 面板来开发一些定制度高功能，比如：调用API接口，自定义动作执行等等。
 */

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
    ("「页面 JS」：当前页面地址 " + location.href);
    const ICON_BASE = api.CONST["bd_var:4dd877fb-7a8f-4925-842f-ff14321b7cbb"];
    const self = this;
    const cards = [
        {id: "text_e21llp", label: "快捷应用", icon: "5pWw5o2u5oC76KeI.png"},
        {id: "text_gcvxk0", label: "预警消息", icon: "56S+5Lya5Li75L2TLeW3peS9nOWPsC3kuLvkvZPkv6HnlKjliIbmnpA.png"},
        {id: "text_3llwxt", label: "待办事项", icon: "5L+h5oGv5a6M5ZaE5LiO54m55b6B5YiG5p6QaWNv.png"},
        {id: "text_8qkap5", label: "最新动态", icon: "56S+5Lya5Li75L2TLeW3peS9nOWPsC3moYjku7bliqjmgIE.png"}
    ];
    cards.forEach(card => {
        const html = `
          <div style="display: flex; align-items: center; height: 0.56rem;">
              <div style="width: 0.36rem; height: 0.36rem; background-color: #F0F9FF; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 0.1rem;">
                  <img src="${ICON_BASE}/${card.icon}" alt="图标" style="width: 0.15rem; height: 0.15rem;"> 
              </div>
              <div style="margin-left: 0.1rem; font-size: 0.14rem; line-height: 0.22rem;">
                  ${card.label} 
              </div>
          </div>`;

        self.$$(card.id).$$setValue(html);
    });


}
